<template>
  <div class="root">
    <el-card shadow="never">
      <div class="titleBox">供应商入驻</div>
      <div class="formBox">
        <el-form ref="form" :model="form" label-width="100px">
          <div class="formList">
            <el-form-item label="店铺名称：">
              <el-input v-model="form.name" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="所在市场：">
              <el-select v-model="form.region" placeholder="请选择">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="formList">
            <el-form-item label="店铺联系人：">
              <el-input v-model="form.name" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="联系电话：">
              <el-input v-model="form.name" placeholder="请输入"></el-input>
            </el-form-item>
            <div class="textBox">
              (此联系方式方便分销商可以联系到您，请认真检查是否正确)
            </div>
          </div>
          <div class="formList">
            <el-form-item label="店铺地址：">
              <el-input v-model="form.name" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="QQ号：">
              <el-input v-model="form.name" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
          <div class="formList">
            <el-form-item label="微信号：">
              <el-input v-model="form.name" placeholder="请输入"></el-input>
            </el-form-item>
            <div class="textBox">
              (此联系方式方便分销商可以联系到您，请认真检查是否正确)
            </div>
          </div>

          <el-form-item label="微信二维码：">
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
            >
              <div class="cententBox">
                <img
                  src="@/static/Imgs/userImg/shangchuan.png"
                  class="uploadImg"
                  alt=""
                />
                <div>上传图片</div>
              </div>
            </el-upload>
            <div class="textBox" style="color: #a7adb8; font-size: 0.12rem">
              (此联系方式方便分销商可以联系到您，请认真检查是否正确)
            </div>
          </el-form-item>
          <el-divider></el-divider>
          <el-form-item label="售后服务:" label-width="100px">
                  <el-checkbox
                    v-model="form.returnGoods"
                    label="支持15天退货"
                  ></el-checkbox>
                  <el-checkbox
                    v-model="form.exchangeGoods"
                    label="支持15天换货"
                  ></el-checkbox>
                </el-form-item>
                <el-form-item label="店铺域名:" label-width="100px">
                  http：//
                  <el-input
                    style="width: 1.5rem"
                    v-model="form.storeDomainName"
                    placeholder="请输入"
                  ></el-input>
                  .5ts.com
                </el-form-item>
                <el-divider></el-divider>
          <el-form-item label="">
            <div class="redBtn">提交申请</div>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>
      
      <script>
export default {
  data() {
    return {
      form: {},
    };
  },
  methods: {},
};
</script>
      
      <style scoped lang="scss">
.root {
  .titleBox {
    font-size: 0.2rem;
    font-weight: 700;
  }

  .formBox {
    margin-top: 0.2rem;
    .formList {
      display: flex;
      align-items: center;
      .textBox {
        color: #a7adb8;
        font-size: 0.12rem;
      }
    }
    /deep/ .el-form-item {
      display: flex;
      margin-bottom: 0.1rem;
      width: 30%;
    }
    /deep/ .el-input__inner {
      background-color: #f5f7f9;
      border: 1px solid #e8e8e8;
    }
    /deep/ .el-input {
      width: 3rem;
    }
    .uploadImg {
      width: 0.4rem;
      height: 0.4rem;
      margin: 0.2rem 0;
      margin-top: 0.3rem;
    }
    .cententBox {
      color: #999999;
    }
    /deep/ .el-upload--picture-card {
      line-height: 0;
    }
    .redBtn {
      width: 0.9rem;
      height: 0.3rem;
      line-height: 0.3rem;
      background: #e22a1f;
      color: #fff;
      border-radius: 20px;
      text-align: center;
      margin-left: 0.8rem;
      margin-top: 0.2rem;
      cursor: pointer;
    }
  }
}
</style>
      
      